<li class="pb-10 pl-6 border-l {% if current_customer %}border-l-green-200{% endif %}">
    <span class="absolute flex items-center justify-center w-8 h-8 bg-green-200 rounded-full -start-4 ring-4 ring-white dark:ring-slate-900 dark:bg-slate-700">
        <svg class="w-3.5 h-3.5 text-green-900"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
             viewBox="0 0 20 16">
            <path d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z" />
        </svg>
    </span>
    <h3 class="font-medium leading-tight text-slate-800">Customer</h3>
    <p class="text-sm">Select a customer</p>
    <div class="mt-3">
        {% if not current_customer %}
            <form>
                <input type="hidden" name="chat_id" value="{{ current_chat.chat_id }}">
                <input class="input input-bordered mb-2"
                       type="search"
                       name="search"
                       autocomplete="off"
                       placeholder="Search Customers..."
                       hx-post="{% url 'search_customer' %}"
                       hx-trigger="input changed delay:500ms, search"
                       hx-target="#customer-search-results"
                       hx-indicator="closest div">
            </form>
        {% endif %}
        <div id="customer-search-results"
             hx-on::after-swap="hljs.highlightAll()"
             class="relative overflow-x-auto shadow-md rounded-lg">{% include "_customer_search_results.html" %}</div>
    </div>
</li>
